<template>
  <span class="version" :class="version"></span>
</template>

<script>
export default {
  props: {
    ver: {
      type: String,
      required: true,
    },
  },

  data() {
    return {};
  },

  computed: {
    version() {
      // console.log(this.ver);  电影版本匹配
      let arr = [];
      let reg1 = new RegExp("(3D|2D)", "gi");
      let reg2 = new RegExp("(中国巨幕)", "gi");
      let r1 = reg1.exec(this.ver);
      let r2 = reg2.exec(this.ver);
      if (r1) {
        arr.push("v" + r1[0].toLowerCase());
      }
      if (r2) {
        arr.push("imax");
      }

      return arr.join(" ");
    },
  },
};
</script>

<style lang='stylus' scoped>
.pre-show, .version {
  background-size: contain;
  background-repeat: no-repeat;
  height: 14px;
  width: 17px;
  display: inline-block;
  margin-top: 2px;
  margin-left: 6px;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  margin-right: 3px;
}

.pre-show {
  width: 23px;
  background-image: url('');
}

.version.v2d.imax {
  width: 43px;
  background-image: url('');
}

.version.v2d.imax+div.title {
  max-width: calc(100% - 43px);
}

.version.v3d {
  background-image: url('');
}

.version.v3d.imax {
  width: 43px;
  background-image: url('');
}

.version.v3d.imax+div.title {
  max-width: calc(100% - 43px);
}
</style>